<template>
	<view class="signCenter">
		<view class="topBox">
			<image mode="widthFix" src="../../static/img_Signin2x.png" class="headerBg"></image>
			<view class="header">
				<view>
					<view>连续签到</view>
					<view class="mt_10">
						<text>1</text>
						天
					</view>
				</view>
				<view>
					<view>累计学习</view>
					<view class="mt_10">
						<text>1</text>
						小时
					</view>
				</view>
			</view>
		</view>
		
		<view class="signBox myBonus">
			<view class="scholarshipTitle">
				<view class="inline">
					我的奖学金
					<image src="../../static/icon_money2x.png"></image>
				</view>
				<image src="../../static/icon_help2x.png" class="help"></image>
			</view>
			<view class="money">
				￥
				<text>10.00</text>
			</view>
			<view class="countDownTitle">距离奖学金清零还有</view>
			<view class="countDown">0天 08:10:10</view>
			<button hover-class="hover-use" class="use">立即使用</button>
		</view>

		<!-- 日历 -->
<calendar
		:sendYear="toYear" :sendMonth="toMonth"
		:dataSource="signData" :totalNum="sumCount"
		 @dateChange="getData" @clickChange="clickRegister"	 class="myCalendar" >
		 </calendar>
		<view class="signBox taskBox">
			<view class="text_center fs_34">奖学金任务</view>
			<view class="justify_between mt_30">
				<view class="color_8E">每日抽奖</view>
				<button disabled="true" class="taskBtn disabled_border">已完成</button>
			</view>
			<view class="justify_between mt_30">
				<view class="color_8E">每日签到</view>
				<button class="taskBtn">去完成</button>
			</view>
			<view class="text_center mt_30"><navigator class="prize">兑奖记录</navigator></view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			toYear: parseInt(new Date().getFullYear()), //本日
			toMonth: parseInt(new Date().getMonth() + 1), //本月
			sumCount: 0,
			signData: []
		};
	},
	created() {
		//获取当前用户当前任务的签到状态  			
		this.getData(this.toYear+"-"+this.toMonth);
	},
	methods: {
		clickRegister(day) {
			//console.log("在模版页签到了", day);
			this.signData.push(day);
			this.sumCount++
			//this.$http.postHttp("Comment/UpdateRecord", day, (res) => {//可以通过后台接口添加当前用户当日打卡记录，
			// 		//console.log(res);
			// 		//if (res!= undefined) {
			// 			uni.showToast({
			// 				title: "打卡成功"+day,
			// 				icon: 'success',
			// 				duration: 2000
			// 			});
			// 		
			// 		//}
			//  })	
		},
		//当模板的时候可以直接引入，然后触发子组件事件到父界面去控制数据
	
		//获取当前用户该任务的签到数组
		getData(val) {
			let y=val.split('-')[0];
			let m=val.split('-')[1];
			//this.$http.postHttp("Comment/GetRecord", {//可以通过后台接口去获取你的打卡数据
			// 	Year: y,
			// 	Month: m,
			// }, (res) => {
			//console.log(res);
			this.sumCount = 88; //res.SumCount		
			if (y == this.toYear && m == this.toMonth) {
				let num=["02","03","06","08","12","15"],newSign=[],today=new Date().getDate();
					num.map(res=> {
						if(parseInt(res)>today){
							return
						}
						newSign.push(y+"-"+m+"-"+res)
					})
					
				this.signData = newSign;
			} else {
			 	this.signData = [];
			 }
			// })
		},
	}
};
</script>

<style lang="scss">
.signCenter {
	.topBox {
		// position: relative;
		.headerBg {
			width: 100%;
			height: 314rpx;
		}
	}

	.header {
		position: absolute;
		top: 30rpx;
		left: 20rpx;
		right: 20rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		text-align: center;
		color: #fff;
		padding-top: 30rpx;
		text {
			font-size: 50rpx;
		}
	}

	.signBox {
		margin: 30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		z-index: 1;
	}
	.myBonus {
		    position: absolute;
		    top: 160rpx;
		    left: 0;
		    right: 0;
		.scholarshipTitle {
			text-align: center;
			position: relative;
		}
		.scholarshipTitle .inline image {
			width: 36rpx;
			height: 36rpx;
			vertical-align: middle;
			margin-left: 10rpx;
		}
		.help {
			width: 36rpx;
			height: 36rpx;
			position: absolute;
			right: 0;
		}
		.money {
			color: #f44336;
			text-align: center;
			margin-top: 10rpx;
		}
		.money text {
			font-size: 50rpx;
		}
		.countDownTitle {
			text-align: center;
			color: #939393;
			font-size: 24rpx;
			margin: 10rpx 0;
		}
		.countDown {
			text-align: center;
			color: #424242;
			font-size: 28rpx;
		}
		.use {
			background-image: linear-gradient(#ff9c2c, #f6460b);
			color: #fff;
			border-radius: 50rpx;
			margin-top: 30rpx;
		}
		.hover-use {
			opacity: 0.8;
		}
	}

	/* 任务 */
	.taskBox {
		margin-top: 20rpx;
		.taskBtn {
			margin: 0;
			background-color: #fff;
			font-size: 26rpx;
			border-radius: 60rpx;
			line-height: 2;
			color: #ff5126;
			border: 1rpx solid #ff5126;
		}
		.taskBtn::after {
			border: none;
		}
		.disabled_border {
			color: #cecece;
			border-color: #cecece;
		}
		.prize {
			display: inline-block;
			color: #ff5126;
			border: 1rpx solid #ff5126;
			border-radius: 60rpx;
			padding: 10rpx 30rpx;
		}
	}
	/deep/.myCalendar {
		// background-color: #fff;
		margin-top: 280rpx;
		.date {
			font-size: 30rpx;
		}
		.myDateTable {
			background: #FFDEAD;
		}
	}
}
</style>
